import { Checkbox, CheckboxGroup, Input } from 'ant-design-vue';
import { defineComponent, PropType, ref, watch } from 'vue';
import { QuestionType } from '../typing';
export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
      required: true,
    },
    language: {
      type: String as PropType<'zh' | 'en'>,
      required: true,
    },
    value: {
      type: Array as PropType<Array<boolean | string | number>>,
    },
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const { language, question, value } = props;
    const mode = ref<string>(question.mode);
    const questionProper =
      language === 'zh' ? question.questionProperZh : question.questionProperEn;
    const multiValue = ref(value || [0]);
    const onInputChange = (inputValue: any) => {
      let disabled = false;
      if (inputValue.trim() != '') {
        disabled = true;
      }
      questionProper?.items?.forEach(eachItem => {
        if (!eachItem.isInput) {
          eachItem.disabled = disabled;
        }
      });
      emit('update:value', inputValue);
    };

    const onCheckboxChange = () => {
      emit('update:value', multiValue.value);
    };

    const watchItemDefault = () => {
      if (mode.value === 'design') {
        questionProper?.items?.forEach(eachItem => {
          watch(
            () => eachItem.isDefault,
            () => {
              const defaultValue: Array<boolean | string | number> = [];
              questionProper?.items?.forEach(eachNewItem => {
                if (eachNewItem.isDefault) {
                  defaultValue.push(eachNewItem.value);
                }
              });

              multiValue.value = defaultValue;
              onCheckboxChange();
            },
          );
        });
      }
    };

    watchItemDefault();
    return () => {
      return (
        <div
          class={[
            'question-container',
            'question-multi-container',
            { 'question-design': mode.value === 'design' },
          ]}
        >
          <div class="question-title" v-html={questionProper!.title}></div>
          <div class="question-items">
            <CheckboxGroup
              class="question-items-checkbox-group"
              v-model:value={multiValue.value}
              onChange={onCheckboxChange}
            >
              {questionProper?.items?.map(eachItem => {
                if (eachItem.isInput) {
                  return (
                    <>
                      <label class="ant-radio-wrapper css-dev-only-do-not-override-10zq477">
                        {eachItem.title}
                        <Input
                          v-model:value={eachItem.value}
                          style="margin-left:8px;width: 100px;margin-right:8px"
                          onChange={() => onInputChange(eachItem.value)}
                        />
                      </label>
                    </>
                  );
                } else {
                  return (
                    <Checkbox value={eachItem.value} disabled={eachItem.disabled}>
                      {eachItem.title}
                    </Checkbox>
                  );
                }
              })}
            </CheckboxGroup>
          </div>
        </div>
      );
    };
  },
});
